<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网 - 淘！我喜欢</title>
    <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
    <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
    <link rel="stylesheet" href="css/index.css">
    <script src="script/main.js" type="module" id="index"></script>
</head>

<body>
    <!-- tab选项卡效果 -->
    <div class="tab">
        <div class="tab_title">
            <ul>
                <li class="active">精选</li>
                <li>美食</li>
                <li>百货</li>
            </ul>
        </div>
        <div class="tab_content">
            <div class="item show">
                <ul>
                    <li>我是精选里面的内容</li>
                    <li>我是精选里面的内容</li>
                    <li>我是精选里面的内容</li>
                </ul>
            </div>
            <div class="item">
                <ul>
                    <li>我是美食美食美食里面的内容</li>
                    <li>我是美食美食美食里面的内容</li>
                    <li>我是美食美食美食里面的内容</li>
                    <li>我是美食美食美食里面的内容</li>
                    <li>我是美食美食美食里面的内容</li>
                </ul>
            </div>
            <div class="item">
                <ul>
                    <li>我是百货里面的内容</li>
                    <li>我是百货里面的内容</li>
                    <li>我是百货里面的内容</li>
                    <li>我是百货里面的内容</li>
                    <li>我是百货里面的内容</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="banner">
        <!-- 6张图片 -->
        <ul>
            <li class="show">
                <a href="#"><img src="../../week03/Day12_ES6/轮播图/img/1.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="../../week03/Day12_ES6/轮播图/img/2.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="../../week03/Day12_ES6/轮播图/img/3.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="../../week03/Day12_ES6/轮播图/img/4.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="../../week03/Day12_ES6/轮播图/img/5.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="../../week03/Day12_ES6/轮播图/img/6.jpg" /></a>
            </li>
        </ul>
        <!-- 6个圆圈 -->
        <ol>
            <li class="active">1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ol>
        <!-- 左右箭头 -->
        <a href="javascript:;" id="left">&lt;</a>
        <a href="javascript:;" id="right">&gt;</a>
    </div>

</body>

</html>